import { useEffect } from 'react';
import { useUsersData } from "../../hook/users";
import { QuestionCircleOutlined } from '@ant-design/icons';
import usersApi from '../../api/user';
import { Card, Table, message, Popconfirm, Space, Input } from 'antd'

const { Search } = Input;

//eslint-disable-next-line
export default () => {

    async function handlDelete(_id) {
        const { status } = await usersApi.delete({ _id });
        if (status) {
            message.success({
                content: "删除成功！",
                duration: 1,
            });
            getUsers()
        }
    }
    const [{ rows, total, }, { getUsers, setCurPage, setEachPage,findUserGet }] = useUsersData();
    useEffect(() => {
        getUsers()
    }, []
    )
    const onSearch = async (value) => {
        // 向状态机发送请求
        await findUserGet({ username: value })

    };

    const columns = [
        {
            title: '姓名',
            dataIndex: 'username',
            key: 'username',
        },
        {
            title: '密码',
            dataIndex: 'password',
            key: 'password',
        },
        {
            title: '电话',
            dataIndex: 'phone',
            key: 'phone',
        },
        {
            title: '地址',
            dataIndex: 'address',
            key: 'address',
        },
        {
            title: '操作',
            dataIndex: '',
            key: 'x',
            render: (text, record) => (
                <Space size="middle">
                    <Popconfirm title="确认删除？" onConfirm={() => {
                        handlDelete(record._id)
                    }} okText="确认"
                        cancelText="取消"
                        icon={<QuestionCircleOutlined style={{ color: 'red' }} />}
                    >
                        <a>删除</a>
                    </Popconfirm>
                </Space>

            ),
        },
    ];



    return (
        <div>
            <Card title="查询" bordered={true}>
                <Space>
                    <Search placeholder="输入搜索内容" onSearch={onSearch} enterButton style={{ width: '200px' }} />
                </Space>
            </Card>
            <div style={{ height: "30px" }}></div>
            <Card >
                <Table
                    rowKey={record => record._id}
                    bordered
                    dataSource={rows} columns={columns}
                    pagination={{
                        total, onChange: (page, pageSize) => {
                            setCurPage(page)
                            setEachPage(pageSize)
                        }
                    }} >

                </Table>
            </Card>
        </div>

    )
}




